<template>
  <el-dialog
    width="650px"
    :visible="dialogVisible"
    :title="title"
    @close="cancell"
  >
    <el-tabs
      class="tabs"
      @tab-click="click"
    >
      <el-tab-pane
        :label="libai"
      >
        <el-form
          ref="form"
          :model="weekL"
          label-width="120px"
          label-position="right"
          style="width: 100%"
          :rules="rules1"
        >
          <el-form-item
            label="工作模式名称:"
            style="margin-bottom: 0px"
            prop="name"
          >
            <el-input
              v-model="weekL.name"
              placeholder="请填写工作模式名称"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="连续工作天数:"
            prop="weekDay"
            style="margin-top: 1px"
          >
            <el-checkbox-group
              v-model="weekL.week"
              style="display: flex;"
              @change="xx($event)"
            >
              <el-checkbox
                v-for="item in week"
                :key="item"
                :label="item"
              >{{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div style="margin-left: 130px;margin-bottom: 10px;color: #bac0cd;">
            选中为工作时间,未选中为休息时间
          </div>
          <el-form-item
            label="工作时间:"
            prop="dateRange"
          >
            <el-time-picker
              v-model="date"
              is-range
              range-separator="至"
              start
              end
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              @change="changed($event)"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="warning"
              style="width:90px;height:40px"
              @click="btnOk"
            >确认</el-button>
            <el-button
              type="button"
              style="width:90px;height:40px"
              @click="cancell"
            >取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane
        v-if="flag"
        :label="lianxu"
      >
        <el-form
          :model="weekL"
          label-width="120px"
          label-position="right"
          style="width: 100%"
          :rules="rules2"
        >
          <el-form-item
            label="工作模式名称:"
            style="margin-bottom: 0px"
            prop="name"
          >
            <el-input
              v-model="weekL.name"
              placeholder="请填写工作模式名称"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="连续工作天数:"
            prop="weekDay2"
            style="margin-top: 18px"
          >
            上 <el-input
              v-model="weekL.workDayNum"
              placeholder="请输入"
              style="width:44%;margin-right:18px;"
            ><span
              slot="suffix"
              style="color:black;margin-right: 10px;"
            >天</span></el-input>

            休 <el-input
              v-model="weekL.restDayNum"
              placeholder="请输入"
              style="width:44%"
            ><span
              slot="suffix"
              style="color:black;margin-right: 10px;"
            >天</span></el-input>
          </el-form-item>
          <el-form-item
            label="工作时间:"
            prop="dateRange2"
          >
            <el-time-picker
              v-model="date"
              is-range
              range-separator="至"
              start
              end
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              @change="changed($event)"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width:90px;height:40px"
              type="warning"
              @click="btnOk"
            >确认</el-button>
            <el-button
              type="button"
              style="width:90px;height:40px"
              @click="cancell"
            >取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
// import temp from '@/eneum/eneum'
import { addWorkHistory, updateWorkHistory } from '@/api/transit'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    week: {
      type: Array,
      default: null
    },

    weekL: {
      type: Object,
      default: null
    },
    title: {
      type: String,
      default: '编辑工作模板'
    },
    flag: {
      type: Boolean,
      default: false
    },
    date: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      sho: true,
      sh: true,
      libai: '礼拜制',
      lianxu: '连续制',
      temp: {
        周一: 'monday',
        周二: 'tuesday',
        周三: 'wednesday',
        周四: 'thursday',
        周五: 'friday',
        周六: 'saturday',
        周日: 'sunday'
      },
      rules1: {
        dateRange: [
          {
            required: true,
            validator: this.validateDateRange,
            trigger: 'blur'
          }
        ],
        name: [
          { required: true, message: '工作模式名称不能为空', trigger: 'blur' }
        ],
        weekDay: [
          { required: true, validator: this.validateWorkDay, trigger: 'blur' }
        ]
      },
      rules2: {
        dateRange2: [
          {
            required: true,
            validator: this.validateDateRange2,
            trigger: 'blur'
          }
        ],
        name: [
          { required: true, message: '工作模式名称不能为空', trigger: 'blur' }
        ],
        weekDay2: [
          { required: true, validator: this.validateWorkDay2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:dialogVisible', false)
      this.$emit('update:weekL', {
        week: [],
        restDayNum: null,
        workDayNum: null,
        monday: 2,
        tuesday: 2,
        wednesday: 2,
        thursday: 2,
        friday: 2,
        saturday: 2,
        sunday: 2,
        name: '',
        workStartMinute1: null,
        workEndMinute1: null,
        workPatternType: '1'
      })
    },
    changed(value) {
      // const time = new Date(value[0])
      // const minutes1 = Math.floor(time.getTime() / 216000)
      // const time2 = new Date(value[1])
      // const minutes2 = Math.floor(time2.getTime() / 216000)
      // this.weekL.workStartMinute1 = minutes1
      // this.weekL.workEndMinute1 = minutes2
      // console.log(minutes1, minutes2)
      // <<<<<<< HEAD
      // =======
      //       const time = new Date(value[0])
      //       const minutes1 = Math.floor(time.getTime() / 216000)
      //       const time2 = new Date(value[1])
      //       const minutes2 = Math.floor(time2.getTime() / 216000)
      //       this.weekL.workStartMinute1 = minutes1
      //       this.weekL.workEndMinute1 = minutes2
      //       console.log(minutes1, minutes2)
      // >>>>>>> f61846014d1539da667787df71924cb67df23f1f
      var date = new Date(value[0])
      const fen1 = date.getMinutes()
      const shi1 = date.getHours()

      var dept = new Date(value[1])
      const fen2 = dept.getMinutes()
      const shi2 = dept.getHours()
      // console.log(minutes1)
      // console.log(minutes2)
      this.weekL.workStartMinute1 = shi1 * 60 + fen1
      this.weekL.workEndMinute1 = shi2 * 60 + fen2
    },
    xx(value) {
      const res = value.map((item) => {
        return this.temp[item]
      })
      console.log(res)
      res.forEach(item => {
        this.weekL[item] = 1
      })
    },
    cancell() {
      this.closeDialog()
      this.$refs.form.resetFields()
    },
    click(w) {
      this.$emit('update:weekL', {
        week: [],
        restDayNum: '',
        workDayNum: '',
        monday: 2,
        tuesday: 2,
        wednesday: 2,
        thursday: 2,
        friday: 2,
        saturday: 2,
        sunday: 2,
        name: '',
        workStartMinute1: null,
        workEndMinute1: null,
        workPatternType: '1'
      })
    },
    validateDateRange(rule, value, callback) {
      if (!this.date.length) {
        callback()
      } else {
        callback()
      }
    },
    validateDateRange2(rule, value, callback) {
      if (!this.date.length) {
        callback()
      } else {
        callback()
      }
    },
    validateWorkDay(rule, value, callback) {
      if (!this.weekL.week.length) {
        callback(new Error('请选择连续工作天数'))
      } else {
        callback()
      }
    },
    validateWorkDay2(rule, value, callback) {
      console.log(123)
      if (this.weekL.restDayNum === '' || this.weekL.workDayNum === '') {
        console.log(456)
        callback(new Error('请填写连续工作天数'))
      } else {
        callback()
      }
    },
    async btnOk() {
      this.$refs.form.validate(async(isOK) => {
        if (isOK) {
          if (this.title === '新增工作模式') {
            console.log(456)
            if (this.weekL.restDayNum) {
              this.weekL.workPatternType = '2'
              await addWorkHistory(this.weekL)
            } else {
              console.log(1)
              this.weekL.workPatternType = '1'
              this.weekL.restDayNum = null
              this.weekL.workDayNum = null
              await addWorkHistory(this.weekL)
            }

            this.$message.success('添加成功')
          }
        }
      })
      this.$refs.form.validate(async(isOK) => {
        console.log(isOK)
        if (isOK) {
          if (this.title === '编辑工作模式') {
            console.log(123)
            await updateWorkHistory(this.weekL)
          }
          this.$message.success('编辑成功!')
          this.closeDialog()
          this.$emit('workHistoryList')
        }
      })
    }
    // closeDialog() {
    //   this.$refs.form.resetFields()
    // }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__active-bar {
  color: #e15536;
  background-color: #e15536 !important;
}
/deep/ .el-tabs__item.is-active {
  color: #e15536 !important;
}
/deep/ .el-tabs__item:hover {
  color: #e15536 !important;
}
</style>
